<template>
	<div class="pagination-wrap">
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:hide-on-single-page="value" :current-page="currentPage" :page-sizes="[10, 20, 30]"
			:page-size="+pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		name: 'commonpagination',
		props: {
			total: {
				required: true
			},
			size: {
				required: true,
				type: [Number, String],
				default: 10
			},
			page: {
				default: 1
			}
		},
		data() {
			return {
				value: false,
				pageSize: this.size,
			};
		},
		computed: {
			currentPage() {
				return +this.page
			}
		},
		mounted() {
			//首次加载只有一页数据时 不显示分页器
			let totalPage = Math.ceil(this.total / this.size);
			if (totalPage <= 1) this.value = true;
		},
		methods: {
			handleSizeChange(val) {
				this.$emit('size-change', val)
				this.pageSize = val;
				this.value = false;
			},
			handleCurrentChange(val) {
				this.$emit('page-change', val)
			}
		},
		watch: {}
	}
</script>

<style lang="less" scoped>
	/deep/.el-pagination {
		text-align: center;
		margin-top: 20px;
	}
</style>